<!DOCTYPE html>
<html>
<head>
    <title>API连接测试</title>
    <style>
        body { 
            font-family: Arial, sans-serif; 
            margin: 20px; 
            background-color: #f5f5f5;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .test-item { 
            background: #f8f9fa; 
            padding: 15px; 
            margin: 10px 0; 
            border-radius: 5px; 
            border-left: 4px solid #007bff;
        }
        .result { 
            margin-top: 10px; 
            padding: 10px; 
            border-radius: 3px; 
        }
        .success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        .info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
        button { 
            padding: 10px 20px; 
            margin: 5px; 
            background: #007bff; 
            color: white; 
            border: none; 
            border-radius: 3px; 
            cursor: pointer; 
        }
        button:hover { background: #0056b3; }
        button:disabled { background: #6c757d; cursor: not-allowed; }
        input[type="text"], input[type="password"] {
            width: 200px;
            padding: 8px;
            margin: 5px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
        .form-group {
            margin: 10px 0;
        }
        label {
            display: inline-block;
            width: 80px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Vue Element Admin - API连接测试</h1>
        
        <div class="test-item">
            <h3>📡 API服务器连接测试</h3>
            <p>测试后端API服务器是否可达</p>
            <button onclick="testApiServer()" id="testServerBtn">测试API服务器连接</button>
            <div id="serverResult" class="result"></div>
        </div>

        <div class="test-item">
            <h3>🔐 登录API测试</h3>
            <p>测试登录接口的响应</p>
            <div class="form-group">
                <label>用户名:</label>
                <input type="text" id="testUsername" placeholder="输入测试用户名" value="admin">
            </div>
            <div class="form-group">
                <label>密码:</label>
                <input type="password" id="testPassword" placeholder="输入测试密码" value="123456">
            </div>
            <button onclick="testLogin()" id="testLoginBtn">测试登录接口</button>
            <div id="loginResult" class="result"></div>
        </div>

        <div class="test-item">
            <h3>🔧 当前配置信息</h3>
            <div id="configInfo" class="result info">
                <p><strong>开发环境API地址:</strong> http://localhost:8000</p>
                <p><strong>前端地址:</strong> http://localhost:9528</p>
                <p><strong>登录API:</strong> http://localhost:8000/user/login</p>
                <p><strong>用户信息API:</strong> http://localhost:8000/user/info</p>
            </div>
        </div>

        <div class="test-item">
            <h3>📋 常见问题解决方案</h3>
            <div class="result info">
                <p><strong>1. CORS错误:</strong> 确保后端API服务器配置了正确的CORS头</p>
                <p><strong>2. 连接拒绝:</strong> 确保后端服务运行在 http://localhost:8000</p>
                <p><strong>3. 404错误:</strong> 检查后端API路由是否正确配置</p>
                <p><strong>4. 认证失败:</strong> 检查用户名密码是否正确</p>
            </div>
        </div>
    </div>

    <script>
        async function testApiServer() {
            const btn = document.getElementById('testServerBtn');
            const result = document.getElementById('serverResult');
            
            btn.disabled = true;
            btn.textContent = '测试中...';
            result.innerHTML = '';
            
            try {
                const response = await fetch('http://localhost:8000/health', {
                    method: 'GET',
                    mode: 'cors'
                });
                
                if (response.ok) {
                    result.innerHTML = `
                        <div class="success">
                            ✅ API服务器连接成功！
                            <br>状态码: ${response.status}
                            <br>响应时间: ${Date.now()}ms
                        </div>
                    `;
                } else {
                    result.innerHTML = `
                        <div class="error">
                            ⚠️ API服务器响应异常
                            <br>状态码: ${response.status}
                            <br>状态文本: ${response.statusText}
                        </div>
                    `;
                }
            } catch (error) {
                result.innerHTML = `
                    <div class="error">
                        ❌ 无法连接到API服务器
                        <br>错误: ${error.message}
                        <br>请确保后端服务运行在 http://localhost:8000
                    </div>
                `;
            }
            
            btn.disabled = false;
            btn.textContent = '测试API服务器连接';
        }

        async function testLogin() {
            const btn = document.getElementById('testLoginBtn');
            const result = document.getElementById('loginResult');
            const username = document.getElementById('testUsername').value;
            const password = document.getElementById('testPassword').value;
            
            if (!username || !password) {
                result.innerHTML = '<div class="error">请输入用户名和密码</div>';
                return;
            }
            
            btn.disabled = true;
            btn.textContent = '测试中...';
            result.innerHTML = '';
            
            try {
                const response = await fetch('http://localhost:8000/user/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        username: username,
                        password: password
                    })
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    result.innerHTML = `
                        <div class="success">
                            ✅ 登录API测试成功！
                            <br>状态码: ${response.status}
                            <br>响应数据: <pre>${JSON.stringify(data, null, 2)}</pre>
                        </div>
                    `;
                } else {
                    result.innerHTML = `
                        <div class="error">
                            ❌ 登录失败
                            <br>状态码: ${response.status}
                            <br>错误信息: ${data.message || data.msg || '未知错误'}
                            <br>响应数据: <pre>${JSON.stringify(data, null, 2)}</pre>
                        </div>
                    `;
                }
            } catch (error) {
                result.innerHTML = `
                    <div class="error">
                        ❌ 登录API请求失败
                        <br>错误: ${error.message}
                        <br>可能的原因: 网络错误、CORS问题或后端服务未启动
                    </div>
                `;
            }
            
            btn.disabled = false;
            btn.textContent = '测试登录接口';
        }

        // 页面加载时显示当前时间
        document.addEventListener('DOMContentLoaded', function() {
            const now = new Date().toLocaleString();
            document.querySelector('h1').innerHTML += `<br><small style="color: #666;">测试时间: ${now}</small>`;
        });
    </script>
</body>
</html>